<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="keywordQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表:优秀实践，copy domain修改列表-->
    <el-table :data="permissions" highlight-current-row v-loading="listLoading" style="width: 100%;">
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="240" sortable>
      </el-table-column>
      <el-table-column prop="url" label="资源地址" width="380" sortable>
      </el-table-column>
      <el-table-column prop="sn" label="权限编码" sortable>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
                     :page-size="pageSize" :total="totals" :current-page="pageNum" style="float:right;">
      </el-pagination>
    </el-col>

  </section>
</template>

<script>
export default {
  data() {
    return {
      //1.分页查询的相关参数
      permissions: [],  //列表数据
      pageSize: 5,      //每页显示的条数
      pageNum: 1,   //当前页
      totals: 0,        //总数量
      listLoading: false, //加载框

      //2.高级查询的相关参数
      keyword: '',
    }
  },
  methods: {
    //1.获取菜单列表
    getPermissions() {
      let para = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyword: this.keyword
      };
      this.listLoading = true; //显示加载框
      this.$http.post("/permission", para).then(res => {
        this.permissions = res.data.rows;//给数组赋值 - 显示列表数据
        this.totals = res.data.totals;  //给总数量赋值 - 计算分页栏
        this.listLoading = false;//关闭加载框
      }).catch(res => {
        this.$message.error("系统繁忙，请稍后重试!!!");
      })
    },

    //2.点击分页实现
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getPermissions();
    },

    //3.高级查询 = 关键字查询
    keywordQuery() {
      //防止当前页不在第一页的时候 通过关键字查询出现 当前页没有数据的情况
      this.pageNum = 1;
      this.getPermissions();
    },
  },
  mounted() {
    this.getPermissions();
  }
}

</script>

<style scoped>

</style>